<template>
	<view class="page" :style="{'min-height':h+'px'}">
		<!-- 头部 -->
		<u-navbar title="预约成功" :autoBack="true" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#111111" :titleStyle="titleStyle"></u-navbar>
		<view class="content" :style="{'margin-top':mt+'px'}">
			<view class="result">
				<image src="https://i.ringzle.com/file/20240110/1d70be22d18642ca9efd9ed4297dddaa.jpg"></image>
				<text>支付成功</text>
				<view>请您准时到达集合码头</view>
			</view>
			<view class="btns">
				<view @tap="toReturnHome">返回首页</view>
			</view>
			<view class="map">
				<map
					id="parkmap" 
					style="width: 100%; height: 913rpx;" 
					:latitude="latitude"
					:longitude="longitude" 
					:markers="markers"
				></map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getWindowInfo().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#111111"
				},
				latitude:'',
				longitude:'',
				markers:[]
			}
		},
		onLoad(option) {
			if(option.latitude&&option.longitude){
				this.latitude = option.latitude;
				this.longitude = option.longitude;
				this.markers.push({
					title: '舟山市嵊泗县五龙乡沿港路51号',
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: "https://fsy.shengsi.gov.cn/file/20240906/f69da85565434e51849827d256efcadd.png",
					width: 20,
					height: 30
				})
			}
		},
		methods: {
			toReturnHome(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		.content{
			.result{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 64rpx;
				image{
					width: 96rpx;
					height: 96rpx;
				}
				&>text{
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
					margin-top: 20rpx;
				}
				&>view{
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
					margin-top: 10rpx;
				}
			}
			
			.btns{
				width: 100%;
				padding: 90rpx 30rpx 80rpx;
				box-sizing: border-box;
				&>view{
					width: 100%;
					height: 88rpx;
					border-radius: 46rpx;
					border: 1rpx solid #007A69;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
					letter-spacing: 2rpx;
				}
			}
			
			.map{
				width: 100%;
				height: 913rpx;
			}
		}
	}
</style>